<template>
  <div>监考报名  |  报名</div>
  <div class="signup-container">
    <div class="signup-header">
      <h2>蓝考报名 / 提交报名</h2>
    </div>

    <div class="signup-form">
      <!-- 左侧历史记录区域 -->
      <div class="history-column">
        <div class="history-section">
          <h3>历史记录</h3>
          <div class="history-item" v-for="(record, index) in historyRecords" :key="index">
            <div class="record-header">
              <span class="record-role">{{ record.role }}</span>
              <span class="record-name">{{ record.name }}</span>
              <span class="record-id">{{ record.id }}</span>
              <span class="record-time">{{ record.time }}</span>
            </div>
            <div class="record-status">{{ record.status }}</div>
          </div>
        </div>
      </div>

      <!-- 右侧表单区域 -->
      <div class="form-column">
        <div class="form-section">
          <h3>四川大学锦江学院大学研究生招生考试监考人员报名表</h3>

          <div class="form-row">
            <div class="form-group">
              <label>姓名：</label>
              <span>张三</span>
            </div>
            <div class="form-group">
              <label>所在单位：</label>
              <span>李正鹏</span>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>性别：</label>
              <span>男</span>
            </div>
            <div class="form-group">
              <label>工号：</label>
              <span>10001</span>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>学历：</label>
              <span>研究生</span>
            </div>
            <div class="form-group">
              <label>联系电话：</label>
              <input type="text" v-model="phone" placeholder="请输入联系电话">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group full-width">
              <label>备注：</label>
              <textarea v-model="remark" placeholder="请输入备注信息"></textarea>
            </div>
          </div>
        </div>

        <div class="divider"></div>

        <div class="confirmation-section">
          <h3>提交报名一次确认</h3>

          <div class="submit-row">
            <button class="submit-btn">提交报名</button>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>出生年月：</label>
              <span>1990年5月</span>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group full-width">
              <label>上传电子照片：</label>
              <div class="upload-area" @click="triggerUpload">
                <span v-if="!photo">点击上传照片</span>
                <img v-else :src="photo" alt="电子照片">
                <input type="file" ref="fileInput" @change="handlePhotoUpload" accept="image/*" hidden>
              </div>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group full-width">
              <label>选择校区：</label>
              <div class="checkbox-group">
                <label v-for="campus in campuses" :key="campus">
                  <input type="checkbox" v-model="selectedCampuses" :value="campus">
                  {{ campus }}
                </label>
              </div>
            </div>
          </div>

          <div class="warning-section">
            <p class="warning-title">温馨提示：</p>
            <ul>
              <li>请勿忘记</li>
              <li>余家头校区</li>
              <li>服从编制</li>
            </ul>
          </div>

          <div class="commitment-section">
            <p class="commitment-title">申请人承诺：</p>
            <p class="commitment-text">
              本人自愿参加研究生入学考试工作，从事学习课程工作和教学、产品管理（国家教育部高等学校全保工程项目），
              切实遵守高考工作守则，按照考试工作安排，完成监考工作。
            </p>
            <div class="agreement">
              <label>
                <input type="checkbox" v-model="agreed">
                本人自愿参加
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const phone = ref('');
const remark = ref('');
const photo = ref('');
const agreed = ref(false);
const fileInput = ref<HTMLInputElement | null>(null);
const selectedCampuses = ref<string[]>(['武汉大学']);

const campuses = ref([
  '上海', '武汉', '上海师范大学', '武汉大学', '武汉大学'
]);

const historyRecords = ref([
  {
    role: '发起人(在职在岗教职工)',
    name: '教职工姓名',
    id: '10001',
    time: '2023/09/19 19:02:44',
    status: '等待发证'
  },
  {
    role: '审批人(学院职工办主任)',
    name: '教职工姓名',
    id: '10001',
    time: '2023/09/19 19:02:44',
    status: '审批中'
  },
  {
    role: '审批人(职能部门综合办主任)',
    name: '教职工姓名',
    id: '10001',
    time: '2023/09/19 19:02:44',
    status: '待审批'
  },
  {
    role: '审批人(学院分管研究生工作副院长)',
    name: '教职工姓名',
    id: '10001',
    time: '2023/09/19 19:02:44',
    status: '待审批'
  },
  {
    role: '审批人(研究生招生考务科科长)',
    name: '教职工姓名',
    id: '10001',
    time: '2023/09/19 19:02:44',
    status: '待审批'
  }
]);

function triggerUpload() {
  if (fileInput.value) {
    fileInput.value.click();
  }
}

function handlePhotoUpload(event: Event) {
  const target = event.target as HTMLInputElement;
  if (target.files && target.files[0]) {
    const file = target.files[0];
    const reader = new FileReader();
    reader.onload = (e) => {
      photo.value = e.target?.result as string;
    };
    reader.readAsDataURL(file);
  }
}
</script>

<style scoped>
.signup-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 25px;
  max-width: 1200px; /* 增加最大宽度 */
  margin: 0 auto;
}

.signup-header {
  text-align: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e8f0;
}

.signup-header h2 {
  color: #1a3a6c;
  font-size: 22px;
  margin: 0;
}

/* 新增：表单整体布局 */
.signup-form {
  display: flex;
  gap: 20px;
}

.history-column {
  flex: 0 0 350px; /* 固定左侧宽度 */
}

.form-column {
  flex: 1; /* 右侧占据剩余空间 */
  min-width: 0; /* 防止内容溢出 */
}

.form-section h3, .confirmation-section h3, .history-section h3 {
  color: #1a3a6c;
  font-size: 18px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.form-group {
  flex: 1;
  min-width: 300px;
  margin-right: 20px;
  margin-bottom: 10px;
}

.form-group.full-width {
  flex: 0 0 100%;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #1a2b4b;
  font-weight: 500;
}

.form-group span {
  display: inline-block;
  padding: 8px 12px;
  background-color: #f8fafc;
  border-radius: 4px;
  width: 100%;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.upload-area {
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  background-color: #f8fafc;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-area img {
  max-width: 100%;
  max-height: 200px;
}

.upload-area:hover {
  border-color: #1a3a6c;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 10px 0;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-group input {
  margin-right: 8px;
}

.divider {
  height: 1px;
  background-color: #e2e8f0;
  margin: 25px 0;
}

.warning-section {
  background-color: #fff8e1;
  padding: 15px;
  border-radius: 4px;
  margin: 15px 0;
}

.warning-title {
  font-weight: bold;
  color: #f57f17;
  margin-bottom: 10px;
}

.warning-section ul {
  padding-left: 20px;
  margin: 0;
}

.warning-section li {
  margin-bottom: 5px;
}

.commitment-section {
  background-color: #e8f5e9;
  padding: 15px;
  border-radius: 4px;
  margin: 15px 0;
}

.commitment-title {
  font-weight: bold;
  color: #2e7d32;
  margin-bottom: 10px;
}

.commitment-text {
  line-height: 1.6;
  margin-bottom: 15px;
}

.agreement {
  display: flex;
  justify-content: flex-end;
}

.agreement label {
  display: flex;
  align-items: center;
}

.agreement input {
  margin-right: 8px;
}

.submit-row {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.submit-btn {
  background-color: #1a3a6c;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #2c5282;
}

.history-section {
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 15px;
  height: 100%;
}

.history-item {
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: white;
}

.record-header {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 10px;
}

.record-role {
  font-weight: 500;
  color: #1a2b4b;
}

.record-name {
  color: #1a2b4b;
}

.record-id {
  color: #666;
}

.record-time {
  color: #666;
  margin-left: auto;
}

.record-status {
  color: #f57f17;
  font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .signup-form {
    flex-direction: column;
  }

  .history-column {
    flex: none;
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>